<html class="hairlines" style="font-size: 89.0667px;">
<head>
    <title>订单列表</title>
    <meta name="keyword" content="订单列表">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">

    <meta id="WV.Meta.PullToRefresh.Disabled" value="true">

    <meta id="WV.Meta.StopBounces" value="true">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta name="spm-id" content="a212db.index">


</head>


<body style="font-size: 16px;">
<div class="main-layout" id="non_payment_order_list" style="overflow: hidden">
    <ul class="list-card">
    </ul>
</div>

</body>

<script>

    let is;

    //删除订单函数
    function delOrder(id) {


        //监听删除事件

        Event.on('do_delete', function () {

            $.get('/order/tenant/remove', {id: id}, function () {
                $('#non_payment_order_' + id).remove();
            }).error(function (err) {
                alert(err.responseJSON.message);
            });

            is.refresh();

        }, true);


        //显示确认面板
        Backs.push(function () {
            mydialog.display('html/dialog/delorderconfirm.html');
        }, function () {


            if (mydialog.isShow) {
                mydialog.close();
            }
            else {
                return true;    //事件已经失效
            }

        }, true);//跳过事件

    }


    function onPaymentDialogClose(id) {

        //在切换为完成支付订单页面后广播追加订单事件
        Event.fanout('append_payedOder', id);

        //支付成功后在当前页面中删除订单
        $('#non_payment_order_' + id).remove();
        is.refresh();
    }

    //支付订单函数
    function paymentOrder(id) {

        let flag = true;

        //监听关闭弹窗事件
        Event.on('dialog_close', function (data) {
            if (data.type === 'order_payment') {

                flag = false;

                //检查一下订单状态
                $.post('/order/pay/hasPaid', {id: id}, function (b) {//返回订单是否成功付款
                        if (b) {
                            onPaymentDialogClose(id);
                        }
                    }
                );

            }
        }, true);


        //监听'我已完成支付按钮'
        Event.on('i_have_payed', function () {

            flag = false;

            //检查一下订单状态
            $.post('/order/pay/hasPaid', {id: id}, function (b) {//返回订单是否成功付款
                if (b) {
                    onPaymentDialogClose(id);
                } else {
                    alert("未查询到支付状态")
                }
                }
            );

        }, true);


        function wo() {

            Event.on('__windows.onfocus', function () {//手动检查

                if (flag) {

                    $.post('/order/pay/hasPaid', {id: id}, function (b) {
                        if (b) {
                            alert('支付完成');
                            onPaymentDialogClose(id);
                        } else {
                            wo();//递归
                        }
                    });

                }
            }, true);//监听一次
        }

        wo();



        //显示支付面板
        Backs.push(function () {
            dialog.display('html/dialog/payment.html', 'order_payment');
        }, function () {

            if (dialog.isShow) {
                dialog.close();
            }
            else {
                return true;    //事件已经失效
            }

        }, true);//跳过事件


        //在新窗口中打开支付页面
        window.open('/tenant/payment?orderId=' + id, '_blank');

    }


    loadjs('https://cdn.staticfile.org/iScroll/5.2.0/iscroll.min.js', function () {

        $('#non_payment_order_list').height($(window).height() - 55);

        //初始化滑动组件
        is = new IScroll('#non_payment_order_list', {
            scrollbars: false,
            mouseWheel: false,
            interactiveScrollbars: false,
            shrinkScrollbars: 'scale',
            fadeScrollbars: false,
            scrollY: true,
            probeType: 1,
            bindToWrapper: true,
            click: true,
            tap: true
        });


        //解决手机端无法滑动问题.
        document.addEventListener('touchmove', function (e) {
            e.preventDefault();
        }, {
            capture: true,
            passive: false
        });

        function append_nonpaymentOrder(order) {


            console.log(order);


            let imgU = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546502159888&di=ba8195972eb78359422bb19a4e6b59d1&imgtype=0&src=http%3A%2F%2Fp2.so.qhimgs1.com%2Ft01481b7750ea1d245e.png";

            if (order.room.images && order.room.images.length > 0) {
                imgU = "/resource/preview/3/" + order.room.images[0] + '.jpg';
            }




            let depositString = '';

            let cost = order.cost;

            //如果订单有押金
            if (order.price.deposit) {
                depositString = '(含押金' + order.price.deposit + '元)';
                cost += order.price.deposit;
            }


            $('#non_payment_order_list ul').append('<li style="padding-top: 5px;padding-bottom: 2px"  id=non_payment_order_' + order.id + '> <div class="item-card">' +
                '                        <div data-tpl-id="orderlist_head_1" class="tpl-wrapper" data-spm="orderlist_head_1">' +
                '                            <div view-name="DLinearLayout"' +
                '                                 style="display: flex; overflow: hidden; height: auto; width: 100%; background-color: rgb(255, 255, 255);">' +
                '                                <div view-name="DLinearLayout"' +
                '                                     style="display: flex; overflow: hidden; flex: 0 0 auto; height: auto; width: fit-content; place-self: flex-start;">' +
                '                                    <div view-name="TImageView"' +
                '                                         style="display: flex; overflow: hidden; flex: 0 0 auto; width: 15px; height: 15px; margin-top: 16px; margin-bottom: 16px; margin-left: 10.688px;">' +
                '                                        <svg t="1547385231814" class="icon"' +
                '                                             style="display: flex; width: 15.184px; height: 15.184px"' +
                '                                             viewBox="0 0 1024 1024"' +
                '                                             version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3945"' +
                '                                              width="200" height="200">' +
                '                                            <defs>' +
                '                                                <style type="text/css"></style>' +
                '                                            </defs>' +
                '                                            <path d="M877.166305 179.076538 435.369204 179.076538 146.778436 179.076538c-44.060495 0-79.917144 39.660278-79.917144 88.447425l0 488.953098c0 48.677653 35.856649 88.446401 79.917144 88.446401l274.955212 0 455.43368 0c44.113707 0 79.970356-39.659255 79.970356-88.446401L957.137685 324.459696l0-7.225565 0-49.655933C957.137685 218.845287 921.281035 179.076538 877.166305 179.076538zM146.778436 234.709603l274.955212 0 455.43368 0c13.201673 0 24.339338 15.102976 24.339338 32.868595l0 49.655933 0 7.225565 0 19.612687L122.439098 344.072383l0-76.54842C122.439098 249.704109 133.576763 234.709603 146.778436 234.709603zM901.506666 399.704424l0 55.632041L122.439098 455.336466l0-55.632041L901.506666 399.704424zM877.166305 789.29142 435.369204 789.29142 146.778436 789.29142c-13.20065 0-24.338315-15.102976-24.338315-32.813337L122.440122 510.967484l779.066545 0 0 245.509577C901.506666 774.296915 890.369002 789.29142 877.166305 789.29142z"' +
                '                                                  p-id="3946" fill="#d81e06"></path>' +
                '                                            <path d="M818.166563 677.864632 651.269415 677.864632c-15.374152 0-27.816532 12.440333-27.816532 27.816532 0 15.374152 12.441357 27.815509 27.816532 27.815509l166.897148 0c15.374152 0 27.815509-12.440333 27.815509-27.815509C845.982072 690.304965 833.541739 677.864632 818.166563 677.864632z"' +
                '                                                  p-id="3947" fill="#d81e06"></path>' +
                '                                        </svg>' +
                '                                    </div>' +
                '                                    <div view-name="DTextView"' +
                '                                         style="display: flex; overflow: hidden; flex: 0 0 auto; max-width: 138.053px; font-size: 12px; margin-top: 16px; margin-bottom: 16px; margin-left: 4.453px; height: auto; width: fit-content; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
                '                                        <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;">等待付款</span>' +
                '                                    </div>' +
                '                                </div>' +
                '                                <div view-name="DLinearLayout"' +
                '                                     style="display: flex; overflow: hidden; -webkit-box-flex: 1; flex: 1 1 0%; width: fit-content; place-self: flex-start;">' +
                '                                </div>' +
                '                            </div>' +
                '                        </div>' +
                '                        <div data-tpl-id="orderlist_sub_1" class="tpl-wrapper" data-spm="orderlist_sub_1">' +
                '                            <div view-name="DLinearLayout"' +
                '                                 style="display: flex; overflow: hidden; height: auto; width: 100%; background-color: rgb(255, 255, 255);">' +
                '                                <div view-name="DFrameLayout"' +
                '                                     style="display: flex; overflow: hidden; height: 80.15px; width: 100%; margin-bottom: 12px; place-self: flex-start; position: relative;">' +
                '                                    <div view-name="TImageView"' +
                '                                         style="display: flex; overflow: hidden; position: absolute; width: 80.16px; height: 80.16px; margin-left: 10.688px; border-radius: 6px; visibility: visible;">' +
                '                                        <div style="width: 100%; height: 100%; background-image: url(' + imgU + '); background-repeat: no-repeat; background-position: center center; background-size: cover;"></div>' +
                '                                    </div>' +
                '                                    <div view-name="DLinearLayout"' +
                '                                         style="display: flex; overflow: hidden; position: absolute; background-color: rgb(255, 255, 255); height: auto; left: 100px; right: 0px; top: 0px; margin-right: 10.688px; -webkit-box-orient: vertical; flex-direction: column;">' +
                '                                        <div view-name="DTextView"' +
                '                                             style="display: flex; overflow: hidden; flex: 0 0 auto; color: rgb(51, 51, 51); max-width: 151.413px; margin-bottom: 5px; height: auto; width: fit-content; font-size: 12px; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
                '                                            <span style="text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">' + order.room.name + '</span>' +
                '                                        </div>' +
                '                                        <div view-name="DTextView"' +
                '                                             style="display: flex; overflow: hidden; flex: 0 0 auto; max-width: 151.413px; color: rgb(153, 153, 153); margin-bottom: 5px; height: auto; width: fit-content; font-size: 12px; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
                '                                            <span style="text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">' + order.room.location.address + '</span>' +
                '                                        </div>' +
                '                                        <div view-name="DLoopLinearLayout"' +
                '                                             style="display: none; overflow: hidden; width: 100%; height: auto; place-self: flex-start;"></div>' +
                '                                        <div view-name="DLoopLinearLayout"' +
                '                                             style="display: none; overflow: hidden; -webkit-box-orient: horizontal; flex-direction: row; width: 100%; height: auto; margin-bottom: 5px; place-self: flex-start;"></div>' +
                '                                        <div view-name="DLoopLinearLayout"' +
                '                                             style="display: none; overflow: hidden; -webkit-box-orient: horizontal; flex-direction: row; width: 100%; height: auto; margin-bottom: 5px; place-self: flex-start;"></div>' +
                '                                        <div view-name="DTextView"' +
                '                                             style="display: none; overflow: hidden; color: rgb(255, 159, 0); height: auto; width: 100%; -webkit-box-pack: end; justify-content: flex-end; -webkit-box-align: center; align-items: center; font-size: 12px; margin-top: 12px;">' +
                '                                            <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;"></span>' +
                '                                        </div>' +
                '                                    </div>' +
                '                                    <div view-name="DLinearLayout"' +
                '                                         style="display: flex; overflow: hidden; position: absolute; right: 0px; top: 0px; margin-right: 10.688px; -webkit-box-orient: vertical; flex-direction: column; height: auto; width: fit-content;">' +
                '                                        <div view-name="DLinearLayout"' +
                '                                             style="display: flex; overflow: hidden; flex: 0 0 auto; margin-top: 3.5px; margin-bottom: 3.5px; height: auto; width: fit-content; place-self: flex-start;">' +
                '                                            <div view-name="DTextView"' +
                '                                                 style="display: flex; overflow: hidden; flex: 0 0 auto; color: rgb(51, 51, 51); margin-left: 10.688px; font-size: 12px; visibility: visible; height: auto; width: fit-content; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
                '                                                <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;">' + order.price.text + '</span>' +
                '                                            </div>' +
                '                                            <div view-name="DTextView"' +
                '                                                 style="display: flex; overflow: hidden; flex: 0 0 auto; color: rgb(51, 51, 51); font-size: 12px; visibility: visible; height: auto; width: fit-content; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
                '                                                <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;"></span>' +
                '                                            </div>' +
                '                                            <div view-name="DTextView"' +
                '                                                 style="display: flex; overflow: hidden; flex: 0 0 auto; color: rgb(51, 51, 51); font-size: 10px; visibility: visible; height: auto; width: fit-content; place-self: flex-start; margin-top: 2px; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
                '                                                <span style="text-overflow: ellipsis; overflow: hidden; line-height: 12px; white-space: nowrap;"></span>' +
                '                                            </div>' +
                '                                        </div>' +
                '                                        <div view-name="DTextView"' +
                '                                             style="display: flex; overflow: hidden; color: rgb(153, 153, 153); font-size: 12px; visibility: visible; margin-top: 3.5px; margin-bottom: 3.5px; -webkit-box-pack: end; justify-content: flex-end; -webkit-box-align: center; align-items: center; height: auto; width: 100%;">' +
                '                                            <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;">x' + order.priceCount + '</span>' +
                '                                        </div>' +
                '                                    </div>' +
                '                                </div>' +
                '                            </div>' +
                '                        </div>' +
                '                        <div data-tpl-id="orderlist_pay_default_1" class="tpl-wrapper"' +
                '                             data-spm="orderlist_pay_default_1">' +
                '                            <div view-name="DFrameLayout"' +
                '                                 style="display: flex; overflow: hidden; height: 32.4px; width: 100%; background-color: rgb(255, 255, 255); position: relative;">' +
                '                                <div view-name="DLinearLayout"' +
                '                                     style="display: flex; overflow: hidden; position: absolute; height: auto; width: fit-content; margin-right: 12px; right: 0px; top: 0px; margin-bottom: 12px; margin-top: 6px;">' +
                '                                    <div view-name="DTextView"' +
                '                                         style="display: flex; overflow: hidden; flex: 0 0 auto; margin-left: 10.688px; color: rgb(153, 153, 153); height: auto; width: fit-content; font-size: 12px; visibility: visible; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
                '                                        <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;">总消费</span>' +
                '                                    </div>' +
                '                                    <div view-name="DTextView"' +
                '                                         style="display: flex; overflow: hidden; flex: 0 0 auto; margin-left: 10.688px; font-size: 12px; color: rgb(51, 51, 51); visibility: visible; height: auto; width: fit-content; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
                '                                        <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;">合计:￥' + cost + depositString + '</span>' +
                '                                    </div>' +
                '                                    <div view-name="DLinearLayout"' +
                '                                         style="display: flex; overflow: hidden; flex: 0 0 auto; width: fit-content; height: auto; place-self: flex-start;">' +
                '                                        <div view-name="DTextView"' +
                '                                             style="display: none; overflow: hidden; flex: 0 0 auto; color: rgb(51, 51, 51); margin-left: 8.907px; font-size: 12px; height: auto; width: fit-content; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
                '                                            <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;"></span>' +
                '                                        </div>' +
                '                                        <div view-name="DTextView"' +
                '                                             style="display: none; overflow: hidden; flex: 0 0 auto; color: rgb(51, 51, 51); font-size: 12px; height: auto; width: fit-content; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
                '                                            <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;">.</span>' +
                '                                        </div>' +
                '                                        <div view-name="DTextView"' +
                '                                             style="display: none; overflow: hidden; flex: 0 0 auto; color: rgb(51, 51, 51); font-size: 10px; height: auto; width: fit-content; place-self: flex-start; margin-top: 2px; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
                '                                            <span style="text-overflow: ellipsis; overflow: hidden; line-height: 12px; white-space: nowrap;"></span>' +
                '                                        </div>' +
                '                                        <div view-name="DTextView"' +
                '                                             style="display: none; overflow: hidden; flex: 0 0 auto; font-size: 10px; color: rgb(51, 51, 51); height: auto; width: fit-content; margin-top: 2px; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
                '                                            <span style="text-overflow: ellipsis; overflow: hidden; line-height: 12px; white-space: nowrap;"></span>' +
                '                                        </div>' +
                '                                    </div>' +
                '                                </div>' +
                '                            </div>' +
                '                        </div>' +
                '                        <div data-tpl-id="orderlist_orderop_default_1" class="tpl-wrapper"' +
                '                             data-spm="orderlist_orderop_default_1">' +
                '                            <div view-name="DLinearLayout"' +
                '                                 style="display: flex; overflow: hidden; -webkit-box-orient: vertical; flex-direction: column; height: auto; background-color: rgb(255, 255, 255); width: 100%;">' +
                '                                <div view-name="DLinearLayout"' +
                '                                     style="display: flex; overflow: hidden; flex: 0 0 auto; background-color: rgb(255, 255, 255); height: auto; width: fit-content;     align-self: flex-end;' +
                '    justify-self: center;">' +
                '                                    <div view-name="DFrameLayout"' +
                '                                         style="display: flex; overflow: hidden; flex: 0 0 auto; height: 28px; width: 72.25px; border-radius: 15px; margin-top: 9px; margin-bottom: 9px; visibility: visible; border-color: rgb(153, 153, 153); border-style: solid; border-width: 1px; margin-right: 8.016px; place-self: flex-start; position: relative;">' +
                '                                        <div view-name="DTextView"' +
                '                                             style="display: flex; overflow: hidden; position: absolute; color: rgb(102, 102, 102); height: 100%; width: 71.253px; font-size: 13px; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center;" onclick=delOrder("' + order.id + '")>' +
                '                                            <span style="text-overflow: ellipsis; overflow: hidden; line-height: 15.6px; white-space: nowrap;" >取消订单</span>' +
                '                                        </div>' +
                '                                    </div>' +
                '                                    <div view-name="DFrameLayout"' +
                '                                         style="display: flex; overflow: hidden; flex: 0 0 auto; height: 28px; width: 72.25px; border-radius: 15px; margin-top: 9px; margin-bottom: 9px; margin-right: 8.016px; visibility: visible; border-color: rgb(255, 80, 0); border-style: solid; border-width: 1px; place-self: flex-start; position: relative;">' +
                '                                        <div view-name="DTextView"' +
                '                                             style="display: flex; overflow: hidden; position: absolute; color: rgb(255, 80, 0); height: 100%; width: 71.253px; font-size: 13px; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center;"  onclick=paymentOrder("' + order.id + '")>' +
                '                                            <span style="text-overflow: ellipsis; overflow: hidden; line-height: 15.6px; white-space: nowrap;">付款</span>' +
                '                                        </div>' +
                '                                    </div>' +
                '                                </div>' +
                '                            </div>' +
                '                        </div>' +
                '                    </div></li>');

            is.refresh();

        }

        //监听追加未付款订单事件
        Event.on('append_nonpaymentOrder', function (id) {

            //将事件缓至跳转到当且页面时再追加订单
            Event.onDisplay('#non_payment_orders', function () {

                $.get('/order/tenant/get', {id: id}, function (order) {

                    append_nonpaymentOrder(order);
                })

            }, true);   //监听一次

        });


        $.get('/order/tenant/non-payment-order', function (ls) {

            for (let i in ls) {
                append_nonpaymentOrder(ls[i]);
            }
        });


        Event.on('order.update', function (msg) {

            if (msg.order.state = 7) {
                //移除一个订单
                $('#non_payment_order_' + msg.order.id).remove();
                is.refresh();
            }


        });
        
    });


</script>

</html>